<link rel="stylesheet" href="<%= themeConfig.domain %>/media/css/font-awesome.css">
<%if(site.customConfig.postlistMode == "default"){%>
<div id="post-container">
    <% posts.forEach(function(post) { %>
    <div class="postshow postlist">
        <% if (themeConfig.showFeatureImage && post.feature) { %>
        <a data-pjax href="<%=post.link%>" class="apost">
            <div id="post" style="width:100%">
                <img src="<%= post.feature%>" class="postimage">
                <div class="posttitlebox">
                    <div class="posttitle">
                        <%= post.title %>
                    </div>
                </div>
            </div>
        </a>
        <div class="postinfo">
            <div class="postdate"><i class="fa fa-calendar"></i><%= post.dateFormat %></div>
            <div class="poststatus postdate"><i class="fa fa-clock-o"></i> <%= post.stats.text %></div>
            <div class="posttag">
                <% post.tags.forEach(function(tag) { %>
                <a data-pjax href="<%= tag.link %>" class="postlink">
                    <i class="fa fa-tag"></i> <%= tag.name %>
                </a>
                <% }); %>
            </div>
        </div>
        <% } else {%>
        <a data-pjax href="<%=post.link%>" class="apost">
            <div id="post" style="width:100%">
                <%if(site.customConfig.bgchoice=='default'){%>
                <img src="<%= site.customConfig['postdefaultimage'] %>" class="postimage">
                <%}else{%>
                <img src="<%= site.customConfig['postdefaultimagelink'] %>" class="postimage">
                <%}%>
            <div class="posttitlebox">
                <div class="posttitle" >
                <%= post.title %>
            </div>
    </div>
</div>
</a>
<div class="postinfo">
    <div class="postdate"><i class="fa fa-calendar"></i><%= post.dateFormat %></div>
    <div class="poststatus postdate"><i class="fa fa-clock-o"></i> <%= post.stats.text %></div>
    <div class="posttag">
        <% post.tags.forEach(function(tag) { %>
        <a data-pjax href="<%= tag.link %>" class="postlink">
            <i class="fa fa-tag"></i> <%= tag.name %>
        </a>
        <% }); %>
    </div>
</div>
<% } %>
</div>
<% }); %>
</div>
<%}else if(site.customConfig.postlistMode == "elegant"){%>
    <div style="display: none;">
        <% posts.forEach(function(post) { %>
            <% if (themeConfig.showFeatureImage && post.feature) { %>
                <span name="plfeature"><%=post.feature%></span>
            <%}else{%>
                <%if(site.customConfig.bgchoice=='default'){%>
                    <span name="plfeature"><%= site.customConfig['postdefaultimage'] %></span>
                    <%}else{%>
                    <span name="plfeature"><%= site.customConfig['postdefaultimagelink'] %></span>
                <%}%>
            <%}%>    
            <span name="pltitle"><%=post.title%></span>
            <span name="pllink"><%=post.link%></span>
            <span name="pldate"><%= post.dateFormat %></span>
            <span name="plstats"><%= post.stats.text %></span>
            <% post.tags.forEach(function(tag) { %>
                <span name="pltag" alt="<%=post.title%>"><%= tag.name %></span>
                <span name="pltaglink" alt="<%=post.title%>"><%= tag.link %></span>
            <%})%>
        <%})%>
    </div>

    
    <div id="post-container" class="eleg-allpostscontainer">
        <div v-for="post in postinfo" class="eleg-posts">
            <div v-if="post.elegcontainer=='eleg-postcontainer-left'">
                    <div :class="post.elegcontainer">
                        <img :src="post.feature" alt="" :class="post.imgclass">
                        <%if (site.customConfig.elegantMen){%>
                        <img class="eleg-swordsmen-left" src="<%= themeConfig.domain %>/media/images/swordsmenleft.webp" alt="">
                        <%}%>
                        <div class="eleg-info">
                            <span class="eleg-title">{{post.title}}</span>
                            <div style="margin-top:15px;">
                                <span class="postdate eleg-date"><i class="fa fa-calendar"></i>{{post.date}}</span>
                                <span class="poststatus postdate eleg-stats"><i class="fa fa-clock-o"></i> {{post.stats}}</span>
                            </div>
                            <div style="margin-top:50px">
                                <a :href="post.link" class="eleg-btn" data-pjax>阅读全文</a>
                            </div>
                        </div>
                    </div>
                    <div class='eleg-tags'>
                        <div v-for="tag in post.tags">
                            <div class="posttag">
                                <a data-pjax href="" class="postlink eleg-postlink">
                                    <i class="fa fa-tag"></i>{{tag}}
                                </a>
                            </div>
                        </div>
                    </div>
            </div>
            <div v-else>
                    <div :class="post.elegcontainer">
                        <div class="eleg-info">
                            <span class="eleg-title">{{post.title}}</span>
                            <div style="margin-top:15px;">
                                <span class="postdate eleg-date"><i class="fa fa-calendar"></i>{{post.date}}</span>
                                <span class="poststatus postdate eleg-stats"><i class="fa fa-clock-o"></i> {{post.stats}}</span>
                            </div>
                            <div style="margin-top:50px">
                                <a :href="post.link" class="eleg-btn" data-pjax>阅读全文</a>
                            </div>
                        </div>
                        <%if (site.customConfig.elegantMen){%>
                        <img class="eleg-swordsmen" src="<%= themeConfig.domain %>/media/images/swordsmen.webp" alt="">
                        <%}%>
                        <img :src="post.feature" alt="" :class="post.imgclass">
                    </div>
                    <div class='eleg-tags'>
                        <div v-for="tag in post.tags">
                            <div class="posttag">
                                <a data-pjax href="" class="postlink eleg-postlink">
                                    <i class="fa fa-tag"></i>{{tag}}
                                </a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    
    <script>
    var app2 = new Vue({
      el: '#post-container',
      mounted:function(){
        this.getpostInfo();
      },
      methods:{
         getpostInfo:function(){
             var plflist = $("span[name='plfeature']");
             var pltlist = $("span[name='pltitle']");
             var plllist = $("span[name='pllink']");
             var pldlist = $("span[name='pldate']");
             var plslist = $("span[name='plstats']");
             var pltaglist = $("span[name='pltag']");
             for(var i=0;i<this.pagesize&&i<plflist.length;i++){
                 var d = {};
                 var tags = []
                 d["feature"] = plflist.eq(i).html();
                 d["title"] = pltlist.eq(i).html();
                 d["link"] = plllist.eq(i).html();
                 d["date"] = pldlist.eq(i).html();
                 d['stats'] = plslist.eq(i).html();
                 for(var j=0;j<pltaglist.length;j++){
                     if(pltaglist.eq(j).attr('alt')==d['title'])
                        tags.push(pltaglist.eq(j).html())
                 }
                 d["tags"] = tags;
                 if(i%2==0)
                 {
                     d['elegcontainer'] = 'eleg-postcontainer-left';
                     d['imgclass'] = 'eleg-img-left'
                 }
                 else{
                    d['elegcontainer'] = 'eleg-postcontainer-right';
                    d['imgclass'] = 'eleg-img-right' 
                 }
                 this.postinfo.push(d);
             }
         }
      },
      data: {
        pagesize: "<%=themeConfig.postPageSize%>",
        postinfo:[],
      }
    })
    </script>
<%}%>